<script lang="ts" setup>
import ClassStatus from './ClassStatus.vue'
import { EnrollmentApi, StudentApi } from '@/apis'
import type { TableInstanceColumns } from '@/components/ProTable/type'
import { useDictFilterOptions, useForm } from '@/hooks'
import { useTable } from '@/hooks/modules/useTable'

const props = defineProps<{ id: string }>()

// const { form, resetForm } = useForm<StudentApi.StudentClassQuery>({
//   className: undefined,
//   classStatus: '',
// })

const { form, resetForm } = useForm<EnrollmentApi.EnrollClassQuery>({
  studentId: props.id,
  enrollStatus: 'NORMAL',
  classStatus: undefined,
  // classStatus: [0, 1],
})

const {
  tableData,
  loading,
  pagination,
  search,
} = useTable(pagination => EnrollmentApi.getEnrollClassPage({ ...form, ...pagination }))

const columns: TableInstanceColumns[] = [
  {
    title: '序号',
    width: 66,
    align: 'center',
    fixed: 'left',
    render: ({ rowIndex }) => h('span', {}, rowIndex + 1 + (pagination.current - 1) * pagination.pageSize),
  },
  { title: '班级名称', dataIndex: 'name', slotName: 'name', fixed: 'left', width: 350 },
  { title: '年份科目', dataIndex: 'classYear', slotName: 'classYear', width: 150 },
  { title: '校区教室', dataIndex: 'campusId', slotName: 'classroom', width: 120 },
  { title: '上课进度(上/退/总)', dataIndex: 'classProgress', slotName: 'classProgress', width: 160 },
  { title: '班级状态', dataIndex: 'classStatus', slotName: 'classStatus', minWidth: 120, filterable: {
    filters: useDictFilterOptions('ClassStatusEnum'),
    multiple: true,
  } },
]

const refresh = () => {
  resetForm()
  search()
}

// 筛选
const onFilterChange = (dataIndex, filteredValues) => {
  form[dataIndex] = filteredValues
}

watch(() => form, () => search(), { deep: true })
watch(() => props.id, () => form.studentId = props.id)
</script>

<template>
  <ProTable
    :data="tableData" :columns="columns" :loading="loading" :pagination="pagination" @refresh="refresh" @filter-change="onFilterChange"
  >
    <template #toolbar-left>
      <!-- <a-input v-model="form.className" placeholder="根据班级名称模糊搜索" allow-clear style="width: 200px;" @change="search">
        <template #prefix>
          <icon-search />
        </template>
      </a-input> -->
      <!-- <div class="search-key">
        <div class="label">
          班级状态
        </div>
        <DictSelect v-model="form.classStatus" type="checkbox" code="ClassStatusEnum" />
      </div> -->
    </template>
    <template #name="{ record }">
      <CellClassInfo :id="record.id" :is-link="true" :name="record.name" :lead-teacher-name="record.leadTeacherName" :assist-teacher-name="record.assistTeacherName" />
    </template>
    <template #classYear="{ record }">
      <DictLabel v-model="record.grade" code="Grade" /> · <DictLabel v-model="record.subject" code="Subject" />
      <div class="text-13px text-gray-4">
        {{ record.classYear }}年 · <DictLabel v-model="record.term" code="TermEnum" />
      </div>
    </template>
    <template #classroom="{ record }">
      <div>{{ record.classroomName || '-' }}</div>
      <div class="text-13px text-gray-4">
        {{ record.campusName }}
      </div>
    </template>
    <template #classStatus="{ record }">
      <ClassStatus code="ClassStatusEnum" :status="record.classStatus" />
    </template>
    <template #classProgress="{ record }">
      {{ record.enrollment.completedLessonCount }}/{{ record.enrollment.cancelLessonCount }}/{{ record.enrollment.enrollLessonCount }}
    </template>
  </ProTable>
</template>

<style lang="less" scoped>
.search-key {
  display: flex;
  align-items: center;

  .label {
    margin-left: 20px;
    margin-right: 10px;
  }
}

.status {
  font-size: 14px;
  padding-left: 10px;
  position: relative;

  &::before {
    position: absolute;
    content: '';
    width: 6px;
    height: 6px;
    background: #165dff;
    border-radius: 50%;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
  }
}
</style>
